<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="js/vuejs-2.5.16.js"></script>

    <style>
        #box {
            width: 100px;
            height: 100px;
            color: darkgray
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>

            <div id="app">
                <button @click="changeRed">红</button>
                <button @click="changeBlue">蓝</button>
                <div id="box" :class="color">
                    点击按钮，背景会切换颜色哦
                </div>
            </div>

            <script type="text/javascript">
                var vm = new Vue({
                    el: "#app",
                    data: {
                        color: "", // 代表当前的class样式，目前是红
                    },
                    methods:{
                        changeRed(){
                             this.color='red'
                        },
                        changeBlue(){
                            this.color='blue';
                        }
                    }
                })
            </script>

</body>
</html>